{extend name="public/basic"}
{block name="css"}
<link rel="stylesheet" href="/static/css/simditor.css">
{/block}
{block name="style"}
.simditor{
    width:375px;
}
.simditor-body{
    min-height:667px;
    padding:0 !important;
}
{/block}
{block name="main"}
    <form class = "layui-form" action="{:url('')}" method="get">
        <div class = "layui-col-xs3">
            <div class = "layui-form-item">
                <label class = "layui-form-label">商品名称</label>
                <div class = "layui-input-block">
                    <input type="text" name="name" class = "layui-input" placeholder="请输入商品名称" value="{$where['name']|default=''}" autocomplete="off"/>
                </div>
            </div>
        </div>
        <div class = "layui-form-item">
            <button class="layui-btn layui-btn-success">查询</button>
            <button type="button" class = "layui-btn layui-btn-default" action="panel" action-url="{:url('add')}" action-after="initKeyword" action-title="新增商品">新增商品</button>
        </div>
    </form>
    <table class = "layui-table">
        <thead>
            <tr>
                <th>商品名称</th>
                <th>关键字</th>
                <th>成本价</th>
                <th>售价</th>
                <th>库存</th>
                <th>状态</th>
                <th>销量</th>
                <th>评论数</th>
                <th>收藏数</th>
                <th>操作</th>
            </tr>
        </thead>
        {php}
        $state=["下架","在售","缺货","断货"];
        $classes = ["primary","success","warning","danger"];
        {/php}
        <tbody>
            {volist name="records" id="vo"}
                <tr>
                    <td>{$vo.name}</td>
                    <td>{$vo.keyword}</td>
                    <td>{$vo.origcost}</td>
                    <td>{$vo.price}</td>
                    <td>{$vo.stock}</td>
                    <td class = "{$classes[$vo['state']]}">
                        {$state[$vo['state']]}
                    </td>
                    <td>{$vo.sale}</td>
                    <td>{$vo.evaluate}</td>
                    <td>{$vo.star}</td>
                    <td>
                        {auth:button rules="$buttons" rule="merchant/goods/edit"}<i class = "layui-icon layui-icon-edit" action="panel" action-url="{:url('edit',['id'=>$vo['id']])}" action-title="编辑商品" action-after="initEditPanel"></i>{/auth:button}
                        {auth:button rules="$buttons" rule="merchant/goods/delete"}<i class = "layui-icon layui-icon-close" action="del" action-url="{:url('delete',['id'=>$vo['id']])}"></i>{/auth:button}
                        {auth:button rules="$buttons" rule="merchant/goods/designer"}<i class = "layui-icon layui-icon-survey" action="panel" action-url="{:url('designer',['id' => $vo['id']])}" action-area="400px;" action-after="initSim"></i>{/auth:button}
                    </td>
                </tr>
            {/volist}
        </tbody>
    </table>
    {$records->render()}
{/block}
{block name="js"}
<script src = "/static/js/module.js"></script>
<script src = "/static/js/hotkeys.js"></script>
<script src = "/static/js/uploader.js"></script>
<script src="/static/js/simditor.js"></script>
<script src="/static/js/html2canvas.min.js"></script>
{/block}
{block name="script"}
function initKeyword(p) {
    keyword({
        box:"#add_goods"
    })
    var fileWidget = new FileWidgt(document.querySelector("#images"));
    fileWidget.newPlaceholder({ url:'{:url('home/file/upload')}' })
}
function initEditPanel(p){
    console.log(111);
    initKeyword(p);
    var colors = document.getElementById("colors");
    var imgBoxs = colors.querySelectorAll("[name='color_img[]']")

    for(var i = 0;i < imgBoxs.length;i++) {
        var imgBox = imgBoxs[i];
        var fileWidget = new FileWidgt(imgBox)
        fileWidget.newPlaceholder({ url:'{:url('home/file/upload')}' })
    }
}
function newTr() {
    $("#specs").append('<tr>' +
        '<td><input type="text" class = "table-input" name = "spec_name[]"/></td>' +
        ' <td><input type="money" class = "table-input" name = "spec_price[]"/></td> ' +
        '<td><i class = "layui-icon layui-icon-close" onclick = "del(this)"></i></td>'+
        '</tr>')
}
function del(obj) {
    $(obj).parent().parent().remove();
}
function newColor(){
    var tr = document.createElement("tr");
    tr.innerHTML = '<td><input type="text" class = "table-input" name = "color_name[]"/></td><td><div name="color_img[]"></div></td><td><input type="money" class = "table-input" name = "color_price[]"/></td><td><i class = "layui-icon layui-icon-close" onclick = "del(this)"></i></td>'
    var imgBox = tr.querySelector("[name='color_img[]']")
    var fileWidget = new FileWidgt(imgBox)
    fileWidget.newPlaceholder({ url:'{:url('home/file/upload')}' })
    document.getElementById("colors").appendChild(tr)
}
var editor = null;
function initSim(p) {
        editor = new Simditor({
        textarea:$("#designer"),
        toolbar:['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'],
        upload:{
            url:"{:url('home/file/upload')}",
            fileKey:"file"
        }
    })
    var description = document.getElementById("description").innerHTML;
    console.log(description)
    editor.setValue(description);
}

function postDesigner() {
    var ele = document.querySelector(".simditor-body");
    html2canvas(ele).then(function(canvas){
        let img = canvas.toDataURL()
        let base = encodeURIComponent(img)
        $.ajax({
            type:'POST',
            url:"{:url('home/file/base_upload')}" ,
            data:{file:base},
            dataType:'json',
            success:function(res) {
                console.log(res)
                if(res.code == 0) {
                    $("#description_url").val(res.msg);
                    $("#desinForm").submit();
                }else {
                    alert("保存失败");
                }
            },
            error:function(err) {
                console.log(err);
                alert("保存失败")
            }
        })
    })

}
{/block}